<template>
	<div class="input-box">
		<iconpark-icon icon-id="calendar1" size="1.2rem" class="refresh"></iconpark-icon>
		<span @click="showCalendar = !showCalendar" class="txt">{{ showDate }}</span>
		<nut-calendar-card class="calendar" v-show="showCalendar" v-model="date" type="range" @change="handleChange"></nut-calendar-card>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import dayjs from 'dayjs';

const date = defineModel('date', {
	default: [new Date(), new Date()],
});

const showCalendar = defineModel('showCalendar', {
	default: false,
});


const showDate = ref<string>(dayjs(date.value[0]).format('YYYY-MM-DD') + ' - ' + dayjs(date.value[1]).format('YYYY-MM-DD'));

const handleChange = (value: Date[]) => {
	if (value.length === 2) {
		showDate.value = dayjs(value[0]).format('YYYY-MM-DD') + '-' + dayjs(value[1]).format('YYYY-MM-DD');
		showCalendar.value = false;
	}
};
</script>

<style lang="scss" scoped>
.input-box {
	border-radius: 8px;
	background: #1d1c3c;
	box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
	display: flex;
	align-items: center;
	height: 40px;
	width: 100%;
	padding: 0 14px;
	box-sizing: border-box;
	.txt {
		color: #c6c4f5;
		font-size: 14px;
		font-weight: 400;
		line-height: 14px;
		margin-left: 8px;
	}
	.calendar {
		position: fixed;
		top: 50px;
		width: 220px;
		z-index: 9999;
		background: radial-gradient(circle, #3b2799e6, #432f9d);
		color: #8e82c2;
		:deep() {
			.nut-calendarcard-header-title {
				font-size: 14px;
			}
			.nut-calendarcard-day.active,
			.nut-calendarcard-day.start,
			.nut-calendarcard-day.end {
				background-color: #578ef5;
			}
			.nut-calendarcard-day.prev {
				color: rgba(255, 255, 255, 0.3);
			}
			.nut-calendarcard-day.next {
				color: #fff;
			}
			.nut-calendarcard-day.current {
				color: #fff;
			}

			.nut-calendarcard-day.weekend {
				color: #fff;
			}


			.nut-calendarcard-day.mid {
				background-color: #578ef533;
				color: #578ef5;
			}
		}
		:deep(.nut-calendarcard-day) {
			width: 30px;
			height: 30px;
		}
	}
}
</style>
